<template>
  <div class="content">
      <ul class="flex-box">
        <li><span>手机号：</span></li>
        <li><input maxlength="11" type="text" v-model="mobile" placeholder="请输入手机号"></li>
        <li><img class="more-icon" v-if="isShow" @click="empty()" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      
      <ul class="flex-box">
        <li><span>验证码：</span></li>
        <li><input maxlength="6" type="text" v-model="code" placeholder="请输入短信验证码"></li>
        <li><span style="float:right" class="common-code" ref='get_code' @click="getCode()">{{getCodes}}</span></li>
      </ul>
      <div class="tc"><button ref="btn" @click="update()" class="common-btn">确认更换</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      isShow: false,
      mobile: '',
      getCodes: '获取验证码',
      isSend: true,
      code: '',
      timer: '',
      myreg: /^((1[3,5,8,7][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/,
      isLogin: false,
      oldMobile: ''
    }
  },
  mounted () {
    apiPost('userinfo', {}).then((data) => {
      this.oldMobile = data.data.account_info.phone
    })
  },
  methods: {
    update () {
      if (this.myreg.test(this.mobile) === true) {
        if (this.code.length > 3) {
          if (this.isLogin === true) {
            apiPost('updatemobile',{'mobile': this.oldMobile,'send_code': this.code, 'new_mobile': this.mobile}).then((data) => {
              if (data.data.status === 0) {
                 MessageBox({
                    title: '提示',
                    message: '更换成功'
                  }).then(() => {
                  this.$router.push('/mobile_set')
                })
              } else {
                  MessageBox({
                    title: '提示',
                    message: '验证码失效，请重新获取验证码'
                  }).then(() => {
                    //this.$router.push('/mobile_set')
                  })
              }
            })
           
          } else {}
        } else {
          MessageBox({
            title: '提示',
            message: '请输入正确验证码'
          })
        }
      } else {
        MessageBox({
          title: '提示',
          message: '手机号或验证码格式不正确'
        })
      }
    },
    empty () {
      this.mobile = ''
    },
    getCode () {
      if (this.myreg.test(this.mobile) === true) {
        if (this.isSend === true) {
          apiPost(`get_code`, {'mobile': this.mobile}).then((data) => {
            console.log(data.data)
          })
          var num = 60
           num--
            this.$refs.get_code.innerHTML = `${num}秒后重发`
            this.$refs.get_code.style.background = '#999'
          this.timer = setInterval(() => {
            num--
            this.$refs.get_code.innerHTML = `${num}秒后重发`
            this.isSend = false
            if (num < 1) {
              this.$refs.get_code.style.background = '#78D041'
              this.$refs.get_code.innerHTML = this.getCodes
              this.isSend = true
              clearInterval(this.timer)
            }
          }, 1000)
        }
      } else {
        MessageBox({
          title: '提示',
          message: '请输入正确的手机号码'
        })
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  watch: {
    mobile (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  updated () {
    if (this.myreg.test(this.mobile) === true && this.isSend === false && this.code.length > 3) {
      this.$refs.btn.style.opacity = '1'
      this.isLogin = true
    } else {
      this.$refs.btn.style.opacity = '0.5'
      this.isLogin = false
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
